<template>
  <view class="wrapper">
    <view class="content">
      <view class="list">
        <view class="left">头像</view>
        <view class="right">
          <image
            class="portrait"
            src="https://bl-box.oss-cn-zhangjiakou.aliyuncs.com/oss/20230421/6c9499a0463852387cb56ad38436cc51.png"
          />

          <u-icon name="arrow-right" size="14" />
        </view>
      </view>
      <view class="list">
        <view class="left">昵称</view>
        <view class="right">
          <input type="text" placeholder="请输入昵称" maxlength="140" value="八六互联测试账号" />
        </view>
      </view>
      <view class="list">
        <view class="left">邀请码</view>
        <view class="right">
          <text>SIW1Tn</text>
        </view>
      </view>
    </view>
    <view class="sub">保存资料</view>
  </view>
</template>

<style lang="less" scoped>
  .content {
    padding: 0 4%;
    height: 100vh;
    background: white;

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 24px 0 22px;

      .left {
        font-size: 15px;
        font-weight: 600;
        color: #000;
      }

      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .portrait {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin-right: 10px;
        }

        uni-input {
          text-align: right;
          font-size: 15px;
          color: #323232;
          margin-right: 8px;
        }
      }
    }
  }

  .sub {
    position: fixed;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 92%;
    height: 42px;
    text-align: center;
    line-height: 42px;
    background: linear-gradient(270deg, #ff8361, #ff5525);
    border-radius: 25px;
    font-size: 15px;
    color: #fff;
  }
</style>
